<template>
    <div id="pie2" style="width: 360px;height:300px;">{{list}}</div>
</template>
<script>
export default {
    data(){
        return{
            pie :null,
            v1: Math.floor(this.list.data[1].value / (this.list.data[0].value + this.list.data[1].value) * 100),
        }
    },
    props:['list'],
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            const echarts = require("echarts");
            this.pie = echarts.init(document.getElementById('pie2'))
            this.pie.setOption({
                title:{
                    text: this.list.tableName,
                    top:'top',
                    left:'80',
                    textStyle:{
                        fontSize: 14,
                        fontWeight: '',
                        color: '#333'
                    },
                },//标题
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}: {c} ({d}%)"
                },//提示框，鼠标悬浮交互时的信息提示
                legend: {
                    show: false,
                    orient: 'vertical',
                    x: 'left',
                    data: ['35%', '65%']
                },//图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
                graphic:{
                    type:'text',
                    left:'center',
                    top:'center',
                    style:{
                        text:''+ this.v1 + '%', //使用“+”可以使每行文字居中
                        textAlign:'center',
                        font:'italic 16px bold',
                        fill:'rgba(0,0,0,0.45)',
                        width:30,
                        height:30
                    }
                },//此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
                series: [
                    {
                        name:'在线数量',//tooltip提示框中显示内容
                        type: 'pie',//图形类型，如饼状图，柱状图等
                        radius: ['35%', '65%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
                        //roseType:'area',是否显示成南丁格尔图，默认false
                        itemStyle: {
                            normal:{
                                label:{
                                    show:false,
                                    textStyle:{color:'#3c4858',fontSize:"18"},
                                    formatter:function(val){   //让series 中的文字进行换行
                                        return val.name.split("-").join("\n");}
                                },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
                                labelLine:{
                                    show:false,
                                    lineStyle:{color:'#3c4858'}
                                }//线条颜色
                            },//基本样式
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色
                                textColor:'#000'
                            }//鼠标放在各个区域的样式
                        },
                        data: this.list.data,//数据，数据中其他属性，查阅文档
                        color: ['rgba(0,0,0,0.15)','#5B8FF9'],//各个区域颜色
                        },//数组中一个{}元素，一个图，以此可以做出环形图
                    ],//系列列表
            })
        }
    }
}
</script>